<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>招生热线</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		<style>
			* {
				padding: 0px;
				margin: 0px auto;
			}
			
			body {
				padding: 5%;
			}
			
			header {
				width: 90%;
				padding: 5px;
				margin-top: 20px;
				margin-bottom: 20px;
			}
			
			header p span {
				margin-left: 15%;
			}
			
			header p {
				margin-top: 5%;
			}
			
			.pp {
				color: #999;
			}
			article {
				margin: auto;
				width: 90%;
				height: 20px;
				padding: 15% 8%;
				border: 8px solid #007AFF;
				border-radius: 40px 0px 40px 0px;
				-webkit-box-shadow: #999 0px 0px 20px;
				-moz-box-shadow: #999 0px 0px 20px;
				box-shadow: #999 0px 0px 20px;
				font-size: 18px;
				margin-top: 50px;
				margin-bottom: 60%;
			}
			article  p{
				text-indent: 2em;
			}
			img {
				width: 100%;
			}
			
			footer {
				padding-bottom: 15%;
			}
			
			footer button {
				width: 40%;
				margin-left: 5%;
			}
			
			.black {
				width: 100%;
				height: 100%;
				display: none;
				position: fixed;
				left: 0;
				top: 0;
				z-index: 20;
				background: rgba(0, 0, 0, 0.5) url(../images/guide.jpg) no-repeat right top;
			}
			
			.bottom {
				position: fixed;
				bottom: 0;
				left: 0;
				height: 8%;
				width: 100%;
				padding: 5% 2%;
				z-index: 10;
				background: #333;
			}
			
			.bottom a {
				width: 10%;
				margin-left: 8%;
				cursor: pointer;
				color: #fff;
				padding: 8px;
				border: 1px solid #000000;
				border-color: #666;
				border-radius: 5px;
			}
		</style>
	</head>

	<body>
		<header>
			<h2>招生热线</h2>
			<p class="pp">发布人：管理者<span>2016-12-02</span></p>
		</header>
		<article>
			<p class="tel">
				招生电话：0719-5523200
			</p>
		</article>
		<footer>
			<button class="mui-btn onblack">发送给朋友</button>
			<button class="mui-btn onblack">发送到朋友圈</button>
		</footer>
		<div class="black">
		</div>
		<div class="bottom">
			<a href="#">返回</a>
			<a href="index.html">首页</a>
			<a href="#">刷新</a>
			<a href="#top">顶部</a>

		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/jquery-1.9.1.js"></script>

		<script>
			$(".onblack").click(function() {
				$(".black").css("display", "block").click(function() {
					$(this).css("display", "none");
				})
			})
		</script>
	</body>

</html>

